웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트를 사용하여 비동기 방식(ajax)으로 처리하는 웹사이트가 많이 늘어나고 있습니다. 그 이유는 역시 비동기식 방식(asynchronous way)이 가진 많은 장점 때문인데요...
아래는 자바스크립트를 사용하여 비동기 방식의 네트워크(ajax)를 구현하는 방법에 대하여 자세히 알아보고자합니다. 그럼 우선적으로 동기식과 비동기식의 차이점 및 특징은 무엇이 있을까요?
! 동기식과 비동기식의 차이
동기식은 서버와 클라이언트가 동시에 통신하여 프로세스를 수행 및 종료까지 같이함을 의미합니다. 만약 서버에서 호출된 결과까지의 시간이 지연이 생길 경우 웹에서는 아무런 작동 없이 기다려야하며 새로운 콘텐츠를 추가, 불러오기 위해서는 페이지를 리로드 하거나 이동하는 것이 필요합니다. 하지만 비동기 방식은 이와 상관없이 언제든지 서버에 요청하여 원하는 정보를 웹페이지를 모두 로드 한 이후에도 가능합니다.! 비동기 프로그래밍의 장단점 알아보기
그렇다면 비동기식의 장점과 단점은 무엇인지 각각 알아봅니다.1. 장점
i. 페이지를 다시 새로 고침할 필요가 없음
ii. 페이지를 떠나지 않기 때문에 입력한 양식 및 정보가 그대로 유지됨
iii. 웹페이지의 전체를 호출하지 않고 필요한 부분만 호출이 가능하기 때문에 불필요한 트래픽을 줄일 수 있음
2. 단점
i. 코드가 복잡해지며 디버깅하기 어려워진다
ii. try-catch 구문 적용이 어려움
(참고. 최근)
사실 단점은 현재로서 대부분 극복되었다고 보아도 무방합니다. 기존의 ajax의 코드를 효과적으로 사용하고 관리하기 위해 다양한 디자인 패턴이 구현되었고 MVC, 모듈 단위의 개발 등 대부분의 단점이 크게 줄어들었습니다. 오히려 ajax를 사용하지 않을 경우 서버렌더링에 의존하는 경우 서버단과 프론트단의 구분이 어려워 더욱 코드의 복잡도와 디버깅의 어려움이 증가할 수 있습니다.
# 자바스크립트의 XMLHttpRequest(XHR) 객체 사용 방법
비동기 방식 ajax(비동기식 자바스크립트와 XML의 약자)는 맨처음 XMLHttpRequest 객체를 통해 시작되었습니다. 그 전의 비동기식은 iframe 또는 frame을 통한 방식이었죠. 자바스크립트를만을 사용하여 구현하는 경우 아래처럼 코드를 작성할 수 있습니다.xhr = new XMLHttpRequest();
// 새로운 생성자 함수 만들기
xhr.open(Method, Url);
// Get or Post 방식을 선택하여 서버와 연결
xhr.send();
// 비동기 방식 수행
xhr.status;
// 수신상태 확인함(200: 정상수신을 의미)
xhr.responseText;
// 수신된 정보를 텍스트로 받음
// 새로운 생성자 함수 만들기
xhr.open(Method, Url);
// Get or Post 방식을 선택하여 서버와 연결
xhr.send();
// 비동기 방식 수행
xhr.status;
// 수신상태 확인함(200: 정상수신을 의미)
xhr.responseText;
// 수신된 정보를 텍스트로 받음
위 코드는 XMLHttpRequest를 이해하기 위해 어떻게 사용하고 동작하는지를 간단하게 알아본 코드입니다. 예제를 위해서는 아래를 참고하세요. 그리고 위 방법은 순수 자바스크립트를 사용한 방법이지만 대부분 라이브러리, 프레임웍을 활용하므로 더 간단한 사용이 가능합니다. 그럼 아래는 간단한 예제입니다.
! Header 정보 추가; 헤더 등의 값을 xhr에 함께 전달하기
만약 헤더 값을 추가하여 서버에 전달 할 수 있겠죠. 이 아래와 같이 값을 설정하여 send()에 함께 보낼 수 있습니다. 먼저 변수 data를 만들고 전달할 헤더 값을 객체로 추가합니다.var data = {
headers: {
Accept: "application/json",
Origin: "https://webisfree.com"
}
};
xhr.send(JSON.stringify(data));
headers: {
Accept: "application/json",
Origin: "https://webisfree.com"
}
};
xhr.send(JSON.stringify(data));
이때 보시는 것처럼 객체를 문자 String으로 변환하여 전달해야 합니다. 이때 사용한 JSON.stringify() 함수는 객체 값을 문자로 변환해주는 유용한 방법입니다. 아래와 같이 data값이 변환되어 전달됩니다.
"{"headers":{"Accept":"application/json","Origin":"https://webisfree.com"}}"
헤더값으로는 Accept, Origin 등등 여러 값들을 설정하여 전달할 수 있으니 참고하시기 바랍니다.
# XMLHttpRequest(XHR) 예제보기
그럼 간단한 예제를 만들어 알아보겠습니다. 먼저 get 방식으로 ajax를 수행하는 예제입니다.@ get 방식으로 통신하기
var xhr = new XMLHttpRequest();
var url = '/ajaxtest.html';
xhr.addEventListener('load', function() {
console.log(this.responseText);
});
xhr.open('GET', url);
xhr.send();
var url = '/ajaxtest.html';
xhr.addEventListener('load', function() {
console.log(this.responseText);
});
xhr.open('GET', url);
xhr.send();
위 코드는 ajaxtest.html에 접근하여 데이터를 get방식으로 불러오는 간단한 예제입니다. AJAX는 html 코드는 물론 xml, json 타입의 데이터도 불러올 수 있습니다.
@ put 방식으로 통신하기
비동기 방식으로 값을 업데이트하는 put 메소드 예제입니다.
var _xhr = new XMLHttpRequest();
var _url = '/ajaxupdate.html';
_xhr.open('PUT', _url, true);
_xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
_xhr.addEventListener('load', function() {
console.log(_xhr.responseText);
});
_xhr.send(siteName=abcde&testCount=100);
var _url = '/ajaxupdate.html';
_xhr.open('PUT', _url, true);
_xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
_xhr.addEventListener('load', function() {
console.log(_xhr.responseText);
});
_xhr.send(siteName=abcde&testCount=100);
여기까지 XMLHttpRequest()를 사용한 비동기 방식 통신 방법을 알아보았습니다.
! 참고사항
XMLHttpRequest로 jsonp 사용이 가능한가?-> jsonp 방식으로 사용하는 것은 어렵습니다.
아래의 글도 찾고 계시지 않나요?
- [자바스크립트] axios를 사용하여 비동기 호출시 try catch 구문에서 404 에러의 response를 처리하는 방법
자바스크립트 Canvas 요소를 이미지로 저장 후 서버에 ajax로 저장하는 방법
자바스크립트 FormData 데이터 전송 알아보기
자바스크립트 fetch API 알아보기
제이쿼리 when() 메소드 알아보기- jquery post method
자바스크립트 ajax를 사용하여 비동기 방식 파일 업로드 예제
자바스크립트 이미지핑 기술 알아보기- AngularJS에서 $http 요청 제어 및 취소하는 방법과 예제보기
- CKEDITOR를 사용하여 AJAX 데이터를 에디터에 추가하는 방법